<template>
    <app-list>
        <template #search>
            <Search />
        </template>
        <template #action>
            <Action />
        </template>

        <Table />

        <template #footer>
            <div class="my_ambient_footer">
                <div class="total">共{{ store.state.pageData.total }}条记录</div>
                <el-pagination v-model:current-page="store.state.pageData.page"
                    :page-size="store.state.pageData.page_size" :disabled="disabled" layout="prev, pager, next, sizes"
                    :total="store.state.pageData.total" @size-change="store.getEnvironmentList()"
                    @current-change="store.getEnvironmentList()" />
            </div>
        </template>

        <DetailDrawer v-if="store.state.detailDrawer.show" />
        <FilterDrawer v-if="store.state.filterDrawer.show" />
        <DialogNumber v-if="store.state.numberDialog.show" v-model="store.state.numberDialog.show" />
        <DialogName v-if="store.state.nameDialog.show" v-model="store.state.nameDialog.show" />
        <DialogIp v-if="store.state.ipDialog.show" v-model="store.state.ipDialog.show" />
        <DialogRemark v-if="store.state.remarkDialog.show" v-model="store.state.remarkDialog.show" />
        <DialogPlantuser v-if="store.state.plantuserDialog.show" v-model="store.state.plantuserDialog.show" />
        <DialogCookie v-if="store.state.cookieDialog.show" v-model="store.state.cookieDialog.show" />
        <DialogDownload v-if="store.state.downloadDialog.show" v-model="store.state.downloadDialog.show" />
    </app-list>
</template>

<script setup>
import Search from "../components/Search.vue";
import Action from "../components/Action.vue";
import Table from "../components/Table.vue";
import FilterDrawer from "../components/FilterDrawer.vue";
import DetailDrawer from "../components/DetailDrawer.vue";
import DialogNumber from "../components/DialogNumber.vue";
import DialogName from "../components/DialogName.vue";
import DialogIp from "../components/DialogIp.vue";
import DialogRemark from "../components/DialogRemark.vue";
import DialogPlantuser from "../components/DialogPlantuser.vue";
import DialogCookie from "../components/DialogCookie.vue";
import DialogDownload from "../components/DialogDownload.vue";

import { myAmbientStore } from './store.js'

const store = myAmbientStore()

provide('storejs', {
    store,
    state: store.state
})
</script>

<style lang="scss" scoped>
.my_ambient_footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>

<style>
.my_ambient_footer .el-pagination button,
.my_ambient_footer .el-pagination ul li {
    border: 1px solid #d9d9d9;
    color: #00000040;
}

.my_ambient_footer .el-pagination .btn-prev,
.my_ambient_footer .el-pagination ul li {
    margin-right: 8px;
}

.my_ambient_footer .el-pagination ul li.is-active {
    border-color: #3569fd;
    color: #3569fd;
}
</style>